<template>
  <div class="multiText">
    <div class="form1">
      <div>
        <span>窗口名称：</span>
        <a-input disabled style="width:140px" :maxLength="15" v-model="form.winName"></a-input>
      </div>
      <div v-show="false">
        <span>起点x：</span>
        <a-input-number
          disabled
          :parser="(value) => (/^\d+$/.test(value) ? value : '')"
          v-model="form.x"
        />
      </div>
      <div v-show="false">
        <span>起点y：</span>
        <a-input-number
          disabled
          :parser="(value) => (/^\d+$/.test(value) ? value : '')"
          v-model="form.y"
        />
      </div>
      <div v-show="false">
        <span>宽度：</span>
        <a-input-number
          disabled
          :parser="(value) => (/^\d+$/.test(value) ? value : '')"
          v-model="form.width"
        />
      </div>
      <div v-show="false">
        <span>高度：</span>
        <a-input-number
          disabled
          :parser="(value) => (/^\d+$/.test(value) ? value : '')"
          v-model="form.height"
        />
      </div>
      <div class="margin-t-20">
        <span>窗口边框：</span>
        <a-select style="background-color:#fff;width:140px" v-model="form.frameMode" @change="setForm">
          <a-select-option :key="0" :value="0">无边框</a-select-option>
          <a-select-option :key="1" :value="1">5点滚动</a-select-option>
          <a-select-option :key="2" :value="2">5点-2点滚动</a-select-option>
        </a-select>
      </div>
    </div>
    <div class="form2">
      <div class="rich_text">
        <div class="set">
          <a-space>
            <a-select 
              style="background-color:#fff;width:100px"
              v-model="form.fontName" 
              @change="setForm"
            >
              <a-select-option v-for="(item, index) in fontNameList" :key="index" :value="item">{{ item }}</a-select-option>
            </a-select>
            <a-input 
              type="color"
              style="width:60px"
              disabled 
              v-model="form.fontColor"
              ></a-input>
            <a-select 
              style="background-color:#fff;width:60px"
              v-model="form.fontSize" 
              @change="setForm"
            >
              <a-select-option v-for="(item, index) in fontSizeList" :key="index" :value="item">{{ item }}</a-select-option>
            </a-select>
            <div>
              <span>行距：</span>
              <a-input-number 
                v-debounce="[setForm, 'input', 500]" 
                style="width:40px"
                :parser="(value) => (/^\d+$/.test(value) ? value > 10 ? 10 : value : '')" 
                v-model="form.lineSpace" />
            </div>
            <a-icon 
              @click="changeBold" 
              class="cursorPoint black"
              :style="{backgroundColor:form.isBold?'#fff':'transparent'}" 
              type="bold" />
            <a-icon 
              @click="changeItalic" 
              class="cursorPoint black" 
              :style="{backgroundColor:form.isItalic?'#fff':'transparent'}" 
              type="italic" />
            <a-icon 
              @click="changeUnderline" 
              class="cursorPoint black" 
              :style="{backgroundColor:form.isUnderline?'#fff':'transparent'}" 
              type="underline" />
              
          </a-space>
          <br>
          <a-space>
            <a-select v-model="form.alignX" class="margin-t-10"  style="width: 60px;background-color:#fff" @change="setForm">
              <a-select-option value="0">
                <a-icon type="align-left" />
              </a-select-option>
              <a-select-option value="1">
                <a-icon type="align-center" />
              </a-select-option>
              <a-select-option value="2">
                <a-icon type="align-right" />
              </a-select-option>
            </a-select>
            <a-select v-model="form.alignY" class="margin-t-10" style="width: 60px;background-color:#fff" @change="setForm">
              <a-select-option value="0">
                <a-icon type="vertical-align-top" />
              </a-select-option>
              <a-select-option value="1">
                <a-icon type="vertical-align-middle" />
              </a-select-option>
              <a-select-option value="2">
                <a-icon type="vertical-align-bottom" />
              </a-select-option>
            </a-select>
          </a-space>
          
        </div>
        <div class="content">
          <a-textarea 
            style="resize:none;background-color:transparent;height:100%;color:#ff0000"
            @change="setForm"
            v-model="form.content"
            placeholder="请输入显示的文本" />
        </div>
      </div>
    </div>
    <div class="form3">
      <div>
        <span>进场特效：</span>
        <a-select v-model="form.actionType" @change="setForm">
          <a-select-option v-for="(item, index) in actionTypeList" :key="index" :value="item.value">{{ item.name }}</a-select-option>
        </a-select>
      </div>
      <div class="margin-t-20">
        <span>播放速度：</span>
        <a-select style="width: 76px" @change="setForm" v-model="form.actionSpeed">
          <a-select-option v-for="(item, index) in actionSpeedList" :value="item" :key="index">{{ item }}</a-select-option>
        </a-select>
        <span class="tip red">值小更快</span>
      </div>
      <div class="margin-t-20">
        <span>停留时间：</span>
        <a-input-number
          v-debounce="[setForm, 'input', 300]"
          :parser="(value) => (/^\d+$/.test(value) ? value : '')"
          :max="60"
          style="width: 76px"
          v-model="form.holdTime"
        />
        <span class="tip red">单位：秒</span>
      </div>
    </div>
  </div>
</template>

<script>
import eqled from '@/const/eqLed.js';

export default {
  data() {
    return {
      myScreen: {},
      form: {
        key:0,
        type:'2',
        content:'',
        winName:'',
        x: 0,
        y: 0,
        width: 0,
        height: 0,
        frameMode:0,
        // frameColor:'#ffffff',
        fontName: "宋体",
        fontSize: "12",
        fontColor: "#ff0000",
        alignX: "0",
        alignY: "0",
        isBold: false,
        isItalic: false,
        isUnderline: false,
        lineSpace: "0",
        actionType: "1",
        actionSpeed: "3",
        holdTime: 5,
        fontCommon:{},
        actionCommon:{},
        areaCommon:{}
      },
      rules: {
        content: [
          { required: true, message: "文本内容不能为空", trigger: "blur" },
        ],
        winName: [
          { required: true, message: "窗口名称不能为空", trigger: "blur" },
        ],
      },
      fontNameList: ['宋体', '微软雅黑', '楷体', '黑体'],
      fontSizeList: ["5","6","7","8","9","10","12","14","16","18",
        "20","24","28","32","36","44","52","60","76"],
      actionTypeList: [
        { name: '无动画方式', value: '1' },
        { name: '左移', value: '2' },
        // { name: '连续左移', value: '3' },
        { name: '右移', value: '4' },
        { name: '上移', value: '5' },
        { name: '连续上移', value: '6' },
        { name: '下移', value: '7' },
      ],
      actionSpeedList: ["1","2","3"],
      maxWidth:0,
      maxHeight:0,
    };
  },
  props: {
    tabsKey:{
      type:Number,
      default:0
    },
    ledScreen: {
      type: Object,
      default: ()=>{},
    },
  },
  created () {
    this.myScreen = this.ledScreen;
    this.maxWidth = localStorage.getItem('screen.width');
    this.maxHeight = localStorage.getItem('screen.height');
    this.form.width = this.maxWidth;
    this.form.height = this.maxHeight;
    this.form.key = this.tabsKey;
   
  },
  destroyed () {
  },
  methods: {
    //创建时间窗对象
    createObj(self,formData, key, pageType, isNewCreate){
      this.form = Object.assign(this.form, formData);
      this.form.winName = `多行文本_${key}`;
      if(pageType != 2 && isNewCreate){
        this.myScreen.createWindow(this.form, pageType, key, self);
      }
    },
    setForm(){
      this.form.showFontSize = this.getShowFontSize(this.form.fontName, this.form.fontSize);
      this.myScreen.setForm(this.form);
    },
    //获取预览显示字号
    getShowFontSize(fontName, fontSize){
      let showFontSize = '';
      if(fontName == '宋体'){
        showFontSize = eqled.songfontSizeMap[fontSize]['fontSize'];
      } else if(fontName == '楷体'){
        showFontSize = eqled.kaifontSizeMap[fontSize]['fontSize'];
      } else if(fontName == '黑体'){
        showFontSize = eqled.heifontSizeMap[fontSize]['fontSize'];
      } else if(fontName == '微软雅黑'){
        showFontSize = eqled.yaheifontSizeMap[fontSize]['fontSize'];
      }
      return showFontSize;
    },
    changeBold(){
      this.form.isBold = !this.form.isBold;
      this.myScreen.setForm(this.form);
    },
    changeItalic(){
      this.form.isItalic = !this.form.isItalic;
      this.myScreen.setForm(this.form);
    },
    changeUnderline(){
      this.form.isUnderline = !this.form.isUnderline;
      this.myScreen.setForm(this.form);
    },
    sort(_item){
      let obj = {
        content:{}
      };
      obj.winName = _item.winName;
      obj.type = _item.type;
      obj.key = _item.key;
      _item.fontCommon = {};
      let fontCommon = [
        'fontName','fontSize','fontColor','alignX','alignY',
        'isBold','isItalic','isUnderline','lineSpace'
      ];
      fontCommon.forEach(item => {
        _item['fontCommon'][item] = _item[item];
      })
      _item.actionCommon = {};
      let actionCommon = [
        'actionType','actionSpeed','holdTime'
      ];
      actionCommon.forEach(item => {
        _item['actionCommon'][item] = _item[item];
      })
      _item.areaCommon = {};
      let areaCommon = [
        'x','y','width','height','frameMode'
      ];
      areaCommon.forEach(item => {
        _item['areaCommon'][item] = _item[item];
      })
      let content = [
        'content','fontCommon','actionCommon','areaCommon'
      ];
      content.forEach(item => {
        obj.content[item] = _item[item];
      })
      obj.content = JSON.stringify(obj.content);
      return obj;
    },
   
  },
};
</script>

<style lang="less" scoped>
.multiText{
  display: flex;
  color: #999;
  font-size: 13px;
  .form1{
    width: 240px;
    height: 225px;
    border: 1px solid #eee;
    border-top: none;
    padding: 16px;
    /deep/ .ant-select-selection{padding-left: 0;}
    /deep/ .ant-select-selection--single .ant-select-selection__rendered{margin-right: 8px;}
    &>div{
      display: flex;
      align-items: center;
    }
  }
  .form2{
    width: 520px;
    height: 225px;
    border-bottom: 1px solid #eee;
    padding: 10px;
    .rich_text{
      border: 1px solid #ddd;
      width: 100%;
      height: 100%;
      .set{
        width: 100%;
        height: 88px;
        padding: 6px 12px;
        margin: 0 auto;
        background-color: #f9f9f9;
        background: linear-gradient(to bottom,  #d9d9d9 0%,#f7f7f7 100%);
        /deep/ .ant-select-selection{padding-left: 0;}
        /deep/ .ant-select-selection--single .ant-select-selection__rendered{margin-right: 8px;}
      }
      .content{
        width: 100%;
        height: 116px;
        background-color: #333;
      }
    }
  }
  .form3{
    width: 240px;
    height: 225px;
    border: 1px solid #eee;
    border-top: none;
    padding: 16px;
    /deep/ .ant-select-selection{padding-left: 0;}
  }
}
.form_title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}
.tip {
  font-size: 12px;
  margin-left: 6px;
}
.tip::before {
  content: "* ";
  color: #ff0000;
}
/deep/ .ant-input-number-handler-wrap{
    display:none;
}
</style>
